<template>
  <div>
    <el-button type="primary" @click="dialogFormVisible = true">新增优惠券</el-button>
    <!-- 表单 -->
    <Table ref="myTable" :tableTitles="titles" :url="this.utils.myurl.couponList"/>

    <!-- dialog弹出框的内容 -->
    <el-dialog title="新增优惠券" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="标题" label-width="120px">
          <el-input v-model="subject" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="副标题" label-width="120px">
          <el-input v-model="content" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="优惠券信息" label-width="120px">
          <el-input v-model="info" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="优惠规则" label-width="120px">
          <el-select v-model="rid0" @change="selectChange0()" clearable placeholder="请选择">
              <el-option
                v-for="rule in rule0"
                :key="rule.cid"
                :label="rule.templateName"
                :value="rule.cid">
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="限制规则" label-width="120px">
          <el-select v-model="rid1" @change="selectChange1()" clearable placeholder="请选择">
              <el-option
                v-for="rule in rule1"
                :key="rule.cid"
                :label="rule.templateName"
                :value="rule.cid">
              </el-option>
          </el-select>
        </el-form-item>

        <!-- 动态属性 -->
        <el-form-item label="动态属性" label-width="120px">

          <!-- 遍历 - 使用限制规则模板 的动态列表 -->
          <el-form-item v-for="temp in dyncTemp1" :label="temp.title" label-width="120px">
            <el-input v-model="temp.value" autocomplete="off"></el-input>
          </el-form-item>

          <!-- 遍历 - 优惠规则模板 的动态列表 -->
          <el-form-item v-for="temp in dyncTemp0" :label="temp.title" label-width="120px">
            <el-input v-model="temp.value" autocomplete="off"></el-input>
          </el-form-item>

        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="insertCoupon()">添 加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Table from './Table.vue'

  export default {
    name: "CouponManager",
    components: {Table},
    methods: {
      //添加优惠券
      insertCoupon(){

        //动态获取 优惠规则
        var classPath0 = this.classPath0
        var dyncTemp0 = this.dyncTemp0;
        //封装成一个对象
        var myrule0 = {
          ruleClass: classPath0,
          dyncTemps: dyncTemp0
        }

        //动态获取 使用限制规则
        var classPath1 = this.classPath1
        var dyncTemp1 = this.dyncTemp1;
        //封装成一个对象
        var myrule1 = {
          ruleClass: classPath1,
          dyncTemps: dyncTemp1
        }


        this.utils.myajax({
          type: "POST",
          url: this.utils.myurl.couponInsert,
          data: {
            subject: this.subject,
            content: this.content,
            info: this.info,
            //优惠券的 优惠规则
            ruleInfo: JSON.stringify(myrule0),
            //优惠券的 使用限制规则
            limitInfo: JSON.stringify(myrule1)
          },
          success: resp => {
            //重新加载表格
            this.$refs.mytable.goPage();

            //隐藏弹出框
            this.dialogFormVisible = false;
          }
        })

      },
      //下拉框选中方法
      selectChange0(){
        for(var i = 0; i < this.rule0.length; i++){
           //找到匹配的规则id
           if(this.rid0 == this.rule0[i].cid){
             //实现类路径
             var classPath0 = this.rule0[i].classPath;
             //获取选中的规则模板的动态属性
             var dyTemp = this.rule0[i].dyncTemplate;
             this.classPath0 = classPath0;
             this.dyncTemp0 = JSON.parse(dyTemp);
             break;
           }
        }
      },
      //下拉框选中方法
      selectChange1(){
        for(var i = 0; i < this.rule1.length; i++){
           //找到匹配的规则id
           if(this.rid1 == this.rule1[i].cid){
             //实现类路径
             var classPath1 = this.rule1[i].classPath;
             //获取选中的规则模板的动态属性
             var dyTemp = this.rule1[i].dyncTemplate;
             this.classPath1 = classPath1;
             this.dyncTemp1 = JSON.parse(dyTemp);
             break;
           }
        }
      }
    },
    data(){
      return {
        dialogFormVisible: false,
        //优惠规则列表
        rule0: [],
        //使用限制规则列表
        rule1: [],
        //选中的优惠规则模板id
        rid0: "",
        //使用优惠规则模板的全路径限定名
        classPath0: "",
        //优惠规则模板的动态字段
        dyncTemp0: [],
        //选中的使用限制规则模板id
        rid1: "",
        //使用限制规则模板的全路径限定名
        classPath1: "",
        //限制规则模板的动态字段
        dyncTemp1: [],
        //标题
        subject: "",
        //副标题
        content: "",
        //描述
        info: "",
        titles: [{
            prop: 'cpId',
            label: 'id',
            width: '50',
            fixed: true
          },{
            prop: 'subject',
            label: '优惠券标题',
            width: '250',
            fixed: false
          },{
            prop: 'content',
            label: '副标题',
            width: '200',
            fixed: false
          },{
            prop: 'info',
            label: '描述',
            width: '250',
            fixed: false
          },{
            prop: 'createTime',
            label: '创建时间',
            width: '200',
            fixed: false
          },{
            prop: 'status',
            label: '状态',
            width: '50',
            fixed: false
          }]
      }
    },
    //生命周期方法
    mounted(){
      //加载优惠券模板列表
      this.utils.myajax({
        url: this.utils.myurl.couponTempList,
        success: resp => {
          for(var i = 0; i < resp.length; i++){
            var rule = resp[i];
            if (rule.type == 0){
              this.rule0.push(rule);
            } else {
              this.rule1.push(rule);
            }
          }
        }
      });
    }
  }
</script>

<style>
</style>
